<template>
  <el-dialog
    ref="wkDialog"
    :visible="visible"
    :append-to-body="true"
    :close-on-click-modal="false"
    title="启用呼叫中心"
    width="500px"
    @close="handleCancel">
    <div>
      <el-form
        ref="form"
        :model="fieldFrom"
        :rules="rules"
        label-position="top">
        <el-form-item
          label="手机号"
          class="wk-form-item">
          <el-input
            :value="user.username"
            disabled />
        </el-form-item>

        <el-form-item
          label="图形验证码"
          class="wk-form-item"
          prop="imgCode">
          <el-input v-model="fieldFrom.imgCode">
            <img
              slot="suffix"
              class="img-code"
              :src="imgCodeData.img"
              @click="getImgCode">
          </el-input>
        </el-form-item>

        <el-form-item
          label="短信验证码"
          class="wk-form-item"
          prop="smsCode">
          <el-input
            ref="smsCode"
            v-model.trim="fieldFrom.smsCode"
            placeholder="请输入短信验证码">
            <el-button
              slot="append"
              :disabled="codeTime !== codeSecond || !fieldFrom.imgCode"
              @click="getSmsCode">
              <template v-if="codeTime === codeSecond">
                <span>获取验证码</span>
              </template>
              <template v-else>
                <span>重新发送({{ codeSecond }}s)</span>
              </template>
            </el-button>
          </el-input>
        </el-form-item>

      </el-form>
    </div>
    <span
      slot="footer"
      class="dialog-footer">
      <el-button
        v-debounce="handleConfirm"
        :disabled="!hasGetCode || !fieldFrom.smsCode"
        type="primary">保存</el-button>
      <el-button @click.native="handleCancel">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  crmCallBdGetImageAPI,
  crmCallBdSendSmsCodeAPI,
  crmCallBdAddSeatAPI
} from '@/callCenter/call.js'

import ElDialogLoadingMixin from '@/mixins/ElDialogLoading'

export default {
  // 图形验证码软化添加
  name: 'CodeCallAddDialog',

  mixins: [ElDialogLoadingMixin],

  props: {
    user: Object, // 员工信息
    visible: {
      type: Boolean,
      required: true,
      default: false
    }
  },

  data() {
    return {
      imgCodeData: {},
      codeTime: 60,
      codeSecond: 60,
      codeTimer: null,
      hasGetCode: false, // 是否获取短信验证码
      fieldFrom: {
        smsCode: ''
      },
      rules: {
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            pattern: /^(?=.*[a-zA-Z])(?=.*\d).{6,20}$/,
            message: '密码由6-20位字母、数字组成'
          }
        ]
      }
    }
  },

  mounted() {
    this.getImgCode()
  },

  methods: {
    /**
     * @description: 获取图形验证
     * @return {*}
     */
    getImgCode() {
      crmCallBdGetImageAPI().then(res => {
        const resData = res.data || {}
        resData.img = `data:image/png;base64,${resData.img}`
        this.imgCodeData = resData
      }).catch(() => {
      })
    },

    /**
     * @description: 获取短信验证码
     * @return {*}
     */
    getSmsCode() {
      this.hasGetCode = false
      const { uuid } = this.imgCodeData
      this.getImgCode()

      crmCallBdSendSmsCodeAPI({
        phone: this.user.username,
        imgCode: this.fieldFrom.imgCode,
        uuid
      })
        .then(() => {
          this.hasGetCode = true
          this.startTimer()
        })
        .catch()
    },

    /**
     * @description: 发送短信倒计时
     * @return {*}
     */
    startTimer() {
      if (this.codeSecond === this.codeTime) {
        this.codeSecond--
      }
      this.codeTimer = setTimeout(() => {
        this.codeSecond--
        if (this.codeSecond >= 0) {
          this.startTimer()
        } else {
          clearTimeout(this.codeTimer)
          this.codeTimer = null
          this.codeSecond = this.codeTime
        }
      }, 1000)
    },

    /**
     * @description: 取消选择
     * @return {*}
     */
    handleCancel() {
      this.$emit('update:visible', false)
    },

    /**
     * @description: 点击确定
     * @return {*}
     */
    handleConfirm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          crmCallBdAddSeatAPI({
            phone: this.user.username,
            smsCode: this.fieldFrom.smsCode,
            state: 1,
            userId: this.user.userId
          }).then(res => {
            this.loading = false
            this.$message.success('操作成功')
            this.$emit('success')
            this.handleCancel()
          }).catch(() => {
            this.loading = false
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form {
  margin-top: 10px;

  ::v-deep .el-form-item__label {
    padding-bottom: 0;
    line-height: 30px;
  }
}

.img-code {
  position: absolute;
  top: 3px;
  right: 0;
  bottom: 0;
  width: 50px;
  cursor: pointer;
}
</style>

